<template>
  <view style="background-color: white;padding: 30rpx;">
    <view style="display: flex;justify-content: space-between;">
      <text style="font-size:38;font-weight: bold;">茶百道成华339店</text>
      <view
        style="width:140rpx;height: 48rpx;display: flex;font-size: 26rpx;justify-content: space-evenly;background-color: #f8f8f8;align-items: center;border-radius: 25rpx;">
        <view
          style="background-color: #0451bc;width: 70rpx;border-radius: 30rpx;height: 48rpx;line-height: 48rpx;text-align: center;">
          自提
        </view>
        <view style=" width: 70rpx;text-align: center;height: 48rpx;line-height: 48rpx;">
          外卖
        </view>
      </view>
    </view>
    <view style="font-size: 26rpx;color: #858585;">
      距离你1.09km
    </view>
    <view style="font-size: 26rpx;color: #858585;display: flex;justify-content: space-between;">
      <text>四川省成都市成华区...</text><text>展开</text>
    </view>
  </view>

  <view style="display: flex;">
    <scroll-view style="width: 160rpx;height: 80vh;" scroll-y="true">
      <view v-for="(item,i) in arr" :key='i' @click="yangshi(i)">
        <view :class="index===i?'ok':'no'">{{item}}</view>
      </view>

    </scroll-view>
    <scroll-view style="flex:1;background-color: white;height: 80vh;" scroll-y="true" scroll-with-animation
      :scroll-into-view="scroll">
      <view v-for="(item,property,index) in arr1">
        <text :id="'text'+index">{{property}}</text>
        <view v-for="(item) in item">
          <buy-tea :name="item.name" :img="'http://localhost:3001/images/'+item.img" :price="item.price">
          </buy-tea>
        </view>
      </view>
    </scroll-view>
  </view>
  <view class="shopCar">
    <view class="goods">
      <uni-badge size="small" :offset="[5,5]" :text="goodSum" absolute="rightTop" type="warning">
        <image src="../../static/icon/shopCar.png" mode=""></image>
      </uni-badge>
      
    </view>
    <view class="car">
      ￥52
    </view>
    <view class="jiesuan">
      去结算
    </view>
  </view>

</template>

<script setup>
  import {
    ref,
    onMounted
  } from "vue";
  import {
    getPageData
  } from "../../services/buy.js"
  const goodSum =ref(2);
  const arr = ref([]);
  const arr1 = ref([]);
  const scroll = ref('');
  onMounted(() => {
    (async function() {
      const data = await getPageData()
      let temp = [];
      for (let item in data) {
        temp.push(item)
      }
      arr.value = temp;
      arr1.value = data;
    })()
  })
  const index = ref(0);
  const yangshi = (i) => {
    index.value = i;
    scroll.value = "text" + i
  }
</script>

<style>
  page {
    background-color: #f8f8f8;
  }

  .no {
    font-size: 26rpx;
    margin: 20rpx 0;
    padding: 25rpx 10rpx;
    text-align: center;
    border-left: 5rpx solid #f8f8f8;

  }

  .ok {
    font-size: 26rpx;
    margin: 20rpx 0;
    padding: 25rpx 10rpx;
    text-align: center;
    border-left: 5rpx solid #0a52b3;
    background-color: #fff;
  }

  scroll-view ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }

  .shopCar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 118rpx;
    border-top: 1rpx solid #e8e8e8;
    border-bottom: 1rpx solid #999;
    position: fixed;
    bottom: 0;
    background-color: #fff;
  }

  .goods {
    width: 100rpx;
  }

  .jiesuan {
    width: 200rpx;
    line-height: 118rpx;
    text-align: center;
    background-color: #0052c5;
    color: white;
  }

  .shopCar image {
    width: 98rpx;
    height: 98rpx;
    border-radius: 98rpx;
    margin-left: 30rpx;
  }

  .car {
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 38rpx;
    line-height: 118rpx;
    flex: 1;
  }
</style>